<template>
    <div class="newsinfo-container">
       <h3 class="title">{{newsInfoData.title}}</h3>
       <p class="subtitle">
           <span>发表时间:{{newsInfoData.add_time|dateFormat()}}</span>
           <span>点击：{{newsInfoData.click}}次</span>
       </p>
       <hr>
       <div class="contenta" v-html="newsInfoData.content">
        
       </div>
       <!-- 评论区 -->
       <comment-box></comment-box>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
import comment from '../subcomponents/comment.vue'
export default {
    data() {
        return {
            id:this.$route.params.id,//将url地址传递过来的id值，挂载到id，方便调用
            newsInfoData:{}//新闻对象       
         }
    },
    created(){
   this.getNewsInfo();
    },
    methods:{
        getNewsInfo(){
            this.$http.get('api/getnew/'+this.id).then(res=>{
                console.log(res);
                if (res.body.status===0) {
                     // 成功
                    this.newsInfoData=res.body.message[0];
                    // 赋值
                    // console.log(this.newsInfoData);
                    

                } else {
                     Toast({
                        message: '调用接口失败',
                        position: 'middle',
                        duration: 3000
                    });
                }
            })
        }
    },
    components:{
        'comment-box':comment
    }
}
</script>
<style lang="scss">
.newsinfo-container{
    padding: 0 4px;
    .title{
  font-size: 16px;
  text-align: center;
  margin: 15px 0;
  color: red;
    }
    .subtitle{
        font-size: 13px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
    .contenta{
      .contenta img{
          width: 100%;
      }
    }
}
</style>
